<!DOCTYPE html>
<html>
    <head>
        <title>Grid Designer (JQuery)</title>
        
        <link rel="stylesheet" href="css/displayApps.css" />
        <link rel="stylesheet" href="css/tileContainerContextMenu.css" />
        <link rel="stylesheet" href="css/layout.css" />
        
        <style type="text/css">
            #main {
                margin: 0px auto;
                width: 1000px;
            }
        </style>
    </head>
    <body onclick="hideContextMenu()" oncontextmenu="hideContextMenu()">
        <div id="main">
            <div id="content">
                <div id="top-container" class="container">
                </div>
            </div>
            
            <div style="float: right; margin-top: 20px;">
                <ul id="list">
                    <li>
                        <div>Global Actions</div>
                    </li>
                    <li>
                        <div>
                            <ul id="contentList">
                                <li class="pseudo-controller" piston-controller-id="Item1">Item1</li>
                                <li class="pseudo-controller" piston-controller-id="Item2">Item2</li>
                                <li class="pseudo-controller" piston-controller-id="Item3">Item3</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
    
        </div>
        
        <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
        <script type="text/javascript" src="js/jqueryui-1.10.3.js"></script>
        <script type="text/javascript" src="js/gridDesigner.js"></script>
        <script type="text/javascript">
	        $(function() {
	            /* ================================== Drag ===================================== */
	            $(".pseudo-controller").draggable({
	                cursor: "move",
	                helper: "clone"
	            });
	            
	            /* ================================== Drop ===================================== */
	            var newCntDiv = createTileContainer();
	        	newCntDiv.appendTo('#top-container');
	        	
	            tileContainerPostCreation();
	            
	        });
        </script>
        
    </body>
</html>
